@charset "utf-8";
@import "reset";
$fs: 64px;

//将px单位换算成rem单位
@function r($px) {
    @return $px/$fs*1rem;
}
//轮播图动画
//@keyframes slides{
//  0%{transform: translate3d(0,0,0);}
//  10%{transform: translate3d(0,0,0);}
//  15% {transform: translate3d(-20%,0,0);}
//  35% {transform: translate3d(-20%,0,0);}
//  40% {transform: translate3d(-40%,0,0);}
//  60% {transform: translate3d(-40%,0,0);}
//  65% {transform: translate3d(-60%,0,0);}
//  85% {transform: translate3d(-60%,0,0);}
//  90% {transform: translate3d(-80%,0,0);}
//  100% {transform: translate3d(-80%,0,0);}
//}
.w {
    width: r(582px);
    margin: 0 auto;
}
html {
    font-size: $fs;
    height: 100%;
}
body {
    height: 100%;
}
.wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
/*热搜框弹出部分*/
.four-w {
    margin: 0 r(16px);
}
.three-w {
    margin: 0 r(27px);
}
.six-w {
    margin: 0 r(13px);
}
input[type="checkbox"] {
    display: none;
}
#sousuo:checked~.top_search {
    top: 0;
    transition: all .6s;
}
#sousuo:checked~section {
    display: none;
}
.top_search {
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    position: absolute;
    top: -100%;
    transition: all .4s;
    .search_head {
        height: r(87px);
        width: 100%;
        background-color: #222222;
        position: relative;
        .close {
            position: absolute;
            left: r(12px);
            top: r(18px);
            z-index: 99;
            width: r(50px);
            height: r(50px);
            img {
                display: block;
                width: 100%;
            }
        }
        form {
            width: r(534px);
            height: r(52px);
            border: r(2px) solid #fff;
            background-color: #222222;
            border-radius: r(26px);
            margin-left: r(88px);
            position: absolute;
            top: r(19px);
            .fangda {
                width: r(27px);
                height: r(27px);
                position: absolute;
                left: r(14px);
                top: r(10px);
                img {
                    display: block;
                    width: 100%;
                }
            }
            input[type="text"] {
                padding-left: r(30px);
                color: #fff;
                border: 0;
                width: r(489px);
                height: r(48px);
                border-radius: r(24px);
                position: absolute;
                left: r(41px);
                top: 0;
                background-color: #222;
                font-size: r(26.89px);
            }
        }
    }
    .search_body {
        overflow: hidden;
        h3 {
            font-size: r(26.63px);
            font-weight: normal;
            margin-top: r(32px);
        }
        .tabs {
            margin-top: r(16px);
            ul {
                li {
                    float: left;
                    border: r(2px) solid #e1e1e1;
                    background-color: #fff;
                    margin-right: r(8px);
                    margin-bottom: r(10px);
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                    &:first-child {
                        background-color: #b20000;
                        a {
                            color: #fff;
                        }
                    }
                    a {
                        display: block;
                        color: #8b8b8b;
                        &:active {
                            background-color: #b20000;
                            color: #fff;
                        }
                    }
                    p {
                        font-size: r(29.23px);
                        line-height: r(55px);
                    }
                }
            }
        }
    }
}

//立即登录界面
#login_btn:checked~.login_page {
    left: 0;
    transition: all .5s;
}
#login_btn:checked~section {
    display: none;
}
#menu:checked~.li_menu {
    display: block;
}
#menu:checked~.rotate {
    transform: rotateZ(90deg);
}
.login_page {
    width: 100%;
    height: 100%;
    background-color: #222222;
    position: absolute;
    top: 0;
    left: -100%;
    transition: all .5s;
    .login_top {
        overflow: hidden;
        border-bottom: r(2px) solid #484848;
        .close_img {
            width: r(50px);
            height: r(50px);
            margin: r(18px) 0;
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .login_mid {
        margin-bottom: r(90px);
        .touxiang {
            width: r(130px);
            height: r(129px);
            margin: r(85px) auto 0;
            img {
                display: block;
                width: 100%;
            }
        }
        h3 {
            text-align: center;
            font-size: r(24.86px);
            margin-top: r(24px);
            color: #fff;
        }
        p {
            font-size: r(19.53px);
            text-align: center;
            margin-top: r(11px);
            a {
                text-decoration: underline;
                color: #525252;
            }
        }
    }
    .login_bot {
        ul {
            li {
                position: relative;
                width: 100%;
                border-bottom: r(2px) solid #353535;
                &:first-child {
                    border: 0;
                }
                &:last-child {
                    border: 0;
                }
                label {
                    display: block;
                    border-bottom: r(2px) solid #353535;
                }
                .rotate {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
                .li_menu {
                    display: none;
                    p {
                        font-size: r(20.08px);
                        line-height: r(66px);
                        text-align: center;
                        a {
                            color: #fff;
                        }
                    }
                    hr {
                        width: r(172px);
                        height: r(2px);
                        background-color: #353535;
                        border: 0;
                        margin: 0 auto;
                    }
                }
                .li_title {
                    font-size: r(20.08px);
                    color: #fff;
                    line-height: r(88px);
                }
                .btn {
                    width: r(11px);
                    height: r(13px);
                    margin-top: r(35px);
                    img {
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
    }
}

//登录界面
//#at_once:checked~.login_page {
//  display: none;
//}
#at_once:checked~.login {
    display: block;
    left: 0;
}
#at_once:checked~.my_center {
    display: block;
}
#enter:checked~.my_center {
    left: 0;
    z-index: 1;
}
.login {
    width: 100%;
    height: 100%;
    background-color: #222;
    position: absolute;
    top: 0;
    display: none;
    left: -100%;
    .login_logo {
        width: r(161px);
        height: r(136px);
        margin: 0 auto;
        margin-top: r(193px);
        img {
            display: block;
            width: 100%;
        }
    }
    form {
        width: r(492px);
        margin: 0 auto;
        margin-top: r(47px);
        .form_inp {
            .user_name, .user_psw {
                width: 100%;
                display: block;
                input::-webkit-input-placeholder {
                    color: #cdcdcd;
                }
                input::-moz-input-placeholder {
                    color: #cdcdcd;
                }
                input::-ms-input-placeholder {
                    color: #cdcdcd;
                }
                input {
                    float: left;
                    width: r(431px);
                    height: r(53px);
                    background-color: #3d3d3d;
                    border: 0;
                    padding-left: r(39px);
                    font-size: r(20px);
                    color: #c5c5c5;
                }
                span {
                    float: left;
                    display: block;
                    width: r(61px);
                    height: r(53px);
                    background-color: #303030;
                    i {
                        display: block;
                        text-align: center;
                        line-height: r(53px);
                        color: #c5c5c5;
                        font-size: r(30px);
                    }
                }
            }
            .user_name {
                margin-bottom: r(16px);
            }
            p.forget_psw {
                text-align: right;
                font-size: r(19.53px);
                margin-top: r(26px);
                i {
                    font-size: r(19.53px);
                    color: #fff;
                }
                a {
                    color: #fff;
                    margin-left: r(6px);
                }
            }
        }
        .form_btn {
            margin-top: r(59px);
            .enter, .register {
                float: left;
                width: 100%;
                height: r(53px);
                color: #CDCDCD;
                font-size: r(23.08px);
                text-align: center;
                line-height: r(53px);
                background-color: #b60005;
            }
            .register {
                margin-top: r(14px);
                background-color: #303030;
                border: r(2px) solid #b60005;
            }
        }
    }
}

//个人中心界面

//#user_menu:checked~.li_menu {
//  display: block;
//}
//#user_menu:checked~.rotate {
//  transform: rotateZ(90deg);
//}
//返回首页
//#return:checked~.my_center {
//  left: -100%;
//}
//#return:checked~.login {
//  left: -100%;
//}
//#return:checked~.login_page {
//  left: -100%;
//}
.my_center {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    left: -100%;
    top: 0;
    background-color: #222222;
    .center_search {
        height: r(89px);
        position: relative;
        border-bottom: r(2px) solid #484848;
        width: r(611px);
        margin: 0 auto;
        .close {
            position: absolute;
            top: r(18px);
            z-index: 99;
            width: r(50px);
            height: r(7px);
            img {
                display: block;
                width: 100%;
            }
        }
        form {
            width: r(534px);
            height: r(52px);
            border: r(2px) solid #fff;
            background-color: #222222;
            border-radius: r(26px);
            position: absolute;
            top: r(19px);
            left: r(76px);
            .fangda {
                width: r(27px);
                height: r(27px);
                position: absolute;
                left: r(14px);
                top: r(10px);
                img {
                    display: block;
                    width: 100%;
                }
            }
            input[type="text"] {
                padding-left: r(30px);
                color: #fff;
                border: 0;
                width: r(489px);
                height: r(48px);
                border-radius: r(24px);
                position: absolute;
                left: r(41px);
                top: 0;
                background-color: #222;
                font-size: r(26.89px);
            }
        }
    }
    .center_bd {
        .user_pic {
            width: r(130px);
            height: r(130px);
            border-radius: 50%;
            margin: 0 auto;
            margin-top: r(33px);
            position: relative;
            background: url(../img/user_pic.jpg) no-repeat;
            background-size: 100%;
            .num {
                position: absolute;
                width: r(34px);
                height: r(34px);
                background-color: #ff0000;
                border-radius: 50%;
                text-align: center;
                line-height: r(34px);
                font-size: r(20.69px);
                color: #fff;
                top: 0;
                right: 0;
            }
        }
        .user_mid {
            border-bottom: r(23px) solid #303030;
            ul {
                overflow: hidden;
                li {
                    font-size: 0;
                    &:first-child {
                        text-align: center;
                        margin-top: r(15px);
                        .name {
                            font-size: r(24.86px);
                            color: #fff;
                            margin-right: r(9px);
                            vertical-align: r(-5px);
                        }
                        .personal {
                            display: inline-block;
                            width: r(93px);
                            height: r(22px);
                            font-size: r(14.2px);
                            text-align: center;
                            line-height: r(22px);
                            border: r(2px) solid #cdcdcd;
                            a {
                                color: #fff;
                            }
                        }
                    }
                    &:nth-child(2) {
                        position: relative;
                        height: r(40px);
                        .star_num {
                            position: absolute;
                            top: r(10px);
                            left: 50%;
                            transform: translateX(-50%);
                            .star {
                                width: r(22px);
                                height: r(20px);
                                display: inline-block;
                                margin-left: r(13px);
                                &:first-child {
                                    margin-left: 0;
                                }
                                img {
                                    display: block;
                                    width: 100%;
                                }
                            }
                        }
                    }
                    &:nth-child(3) {
                        p {
                            font-size: r(23.08px);
                            text-align: center;
                            color: #fff;
                            span {
                                color: #a2a2a2;
                                margin: 0 r(13px) 0 r(9px);
                            }
                            a {
                                color: #b60005;
                                margin-left: r(8px);
                            }
                        }
                    }
                    &:last-child {
                        margin: r(20px) 0;
                        .collect, .publish {
                            width: r(220px);
                            height: r(52px);
                            font-size: r(23.08px);
                            text-align: center;
                            line-height: r(52px);
                            border-radius: r(26px);
                            background-color: #b60005;
                            display: inline-block;
                            a {
                                color: #fff;
                            }
                        }
                        .collect {
                            margin-left: r(90px);
                        }
                        .publish {
                            background-color: #cdcdcd;
                            margin-left: r(20px);
                        }
                    }
                }
            }
        }
        .user_bot {
            ul {
                li {
                    position: relative;
                    width: 100%;
                    border-bottom: r(2px) solid #353535;
                    &:first-child {
                        border: 0;
                    }
                    &:last-child {
                        border: 0;
                    }
                    label {
                        display: block;
                        border-bottom: r(2px) solid #353535;
                    }
                    .rotate {
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                    .li_menu {
                        display: none;
                        p {
                            font-size: r(20.08px);
                            line-height: r(66px);
                            text-align: center;
                            a {
                                color: #fff;
                            }
                        }
                        hr {
                            width: r(172px);
                            height: r(2px);
                            background-color: #353535;
                            border: 0;
                            margin: 0 auto;
                        }
                    }
                    .li_title {
                        font-size: r(20.08px);
                        color: #fff;
                        line-height: r(88px);
                    }
                    .btn {
                        width: r(11px);
                        height: r(13px);
                        margin-top: r(35px);
                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                }
            }
        }
        .exit {
            width: r(180px);
            height: r(52px);
            background-color: #b60005;
            text-align: center;
            line-height: r(52px);
            border-radius: r(26px);
            font-size: r(23.08px);
            margin: 0 auto;
            margin-top: r(24px);
        }
    }
}

header {
    .top {
        width: 100%;
        height: r(90px);
        background-color: #b20000;
        border-bottom: r(2px) solid #d9d9d9;
        overflow: hidden;
        position: relative;
        .top_reg {
            width: r(30px);
            height: r(23px);
            position: absolute;
            left: r(23px);
            top: 50%;
            transform: translateY(-50%);
            img {
                display: block;
                width: 100%;
            }
        }
//      logo部分
        .logo {
            margin: r(25px) auto;
            width: r(264px);
            height: r(39px);
            img {
                display: block;
                width: 100%;
            }
        }
//      热搜部分
        .search {
            position: absolute;
            width: r(42px);
            height: r(42px);
            right: r(17px);
            top: 50%;
            transform: translateY(-50%);
            i {
                display: block;
                font-size: r(42px);
                color: #fff;
            }
        }
        
    }
    //轮播图部分
    .banner {
        width: 100%;
        overflow: hidden;
        .box {
            z-index: 0;
//          width: 100%;
//          animation: slides;
//          animation-duration: 15s;
//          animation-iteration-count:infinite ;
            ul {
                z-index: 0;
                li {
                    float: left;
                    width: 20%;
                    height: r(356px);
                    position: relative;
                    img {
                        display: block;
                        width: 100%;
                    }
                    .banner_bot {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: r(104px);
                        background-color: rgba(0,0,0,.4);
                        p.title {
                            font-size: r(26.63px);
                            color: #fff;
                            margin-top: r(24px);
                            a {
                                display: block;
                                line-height: r(26.63px);
                                color: #fff;
                                width: 90%;
                                margin: 0 auto;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        p.sub {
                            color: #fff;
                            width: 90%;
                            margin: 0 auto;
                            margin-top: r(22px);
                            span {
                                float: left;
                                font-size: r(17.76px);
                                line-height: r(17.76px);
                                i {
                                    font-size: r(17.76px);
                                }
                            }
                            .like {
                                margin-right: r(49px);
                            }
                            .time {
                                float: right;
                            }
                        }
                    }
                }
            }
        }
    }
}

//底部导航栏
footer {
    width: 100%;
    //加载更多部分
    .load {
        width: 100%;
        margin-bottom: r(96px);
        p {
            font-size: r(22px);
            border-top: r(2px) solid #e6e6e6;
            height: r(59px);
            line-height: r(59px);
            text-align: center;
            a {
                color: #bbbbbb;
            }
        }
    }
    .footer_nav {
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: #f5f5f5;
        border-top: r(2px) solid #bbb9ba;
        ul {
            li {
                float: left;
                width: r(128px);
                height: r(95px);
                position: relative;
                span {
                    display: block;
                    margin: 0 auto;
                }
                .nav_line {
                    width: r(2px);
                    height: r(50px);
                    background-color: #ebebeb;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .current {
                    color: #b60005;
                }
                .home {
                    width: r(47px);
                    height: r(38px);
                    margin-top: r(16px);
                    background: url(../img/02home_r.png) no-repeat;
                    background-size: 100%;
                }
                .gimc {
                    width: r(48px);
                    height: r(40px);
                    background: url(../img/03GIMC_g.png) no-repeat;
                    background-size: 100%;
                    margin-top: r(19px);
                }
                .article {
                    width: r(41px);
                    height: r(41px);
                    background: url(../img/05article_g.png) no-repeat;
                    background-size: 100%;
                    margin-top: r(15px);
                }
                .resource {
                    width: r(42px);
                    height: r(46px);
                    background: url(../img/07resou_g.png) no-repeat;
                    background-size: 100%;
                    margin-top: r(12px);
                }
                .college {
                    width: r(70px);
                    height: r(43px);
                    background: url(../img/09college_g.png) no-repeat;
                    background-size: 100%;
                    margin-top: r(14px);
                }
                p {
                    font-size: r(17.76px);
                    line-height: r(17.76px);
                    width: r(128px);
                    position: absolute;
                    bottom: r(11px);
                    color: #8b8b8b;
                    text-align: center;
                }
            }
        }
    }
}
